<template>
    <view class="imginfo" :class="imageIndex % 2 == 0 ? 'imginfo0' : 'imginfo1'">
        <view class="photo" @click="gotoPreView"><image :src="imageInfo.image_url_t" mode="aspectFill"></image></view>
        <view class="drift-name">{{ imageInfo.driftName }}</view>
        <CheckItem class="check-item" :selected="imageInfo.isSelected" @selectPhoto="selectPhoto"></CheckItem>
    </view>
</template>
<script>
import CheckItem from './CheckItem.vue';
export default {
    name: '',
    data() {
        return {};
    },
    props: {
        imageInfo: {
            type: Object,
            require: true
        },
        imageIndex: {
            type: Number,
            require: true
        }
    },
    computed: {},
    mounted() {},
    created() {},
    methods: {
        gotoPreView() {
            this.$emit('gotoPreView', this.imageInfo);
        },
        selectPhoto() {
            this.$emit('selectPhoto', this.imageIndex);
        }
    },
    components: { CheckItem }
};
</script>
<style lang="less" scoped="scoped">
.imginfo {
    width: 504rpx;
    height: 303rpx;
    background-color: #ffffff;
    border-radius: 10rpx;
    z-index: 2;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .photo {
        width: 466rpx;
        height: 265rpx;
        image {
            width: 100%;
            height: 100%;
        }
    }
    .drift-name {
        position: absolute;
        right: 0;
        top: -89rpx;
        height: 61rpx;
        line-height: 61rpx;
        background-color: #ffffff;
        border-radius: 10rpx;
        font-size: 38rpx;
        color: #ff5c84;
        padding: 0 22rpx;
    }
    .check-item {
        position: absolute;
        right: -30rpx;
        bottom: -30rpx;
    }
}

.imginfo1 {
    transform: rotate(-5deg);
    margin-bottom: 230rpx;
}

.imginfo0 {
    transform: rotate(5deg);
    margin-bottom: 248rpx;
}
</style>
